<template>
  <div class="login-container">
    <div class="logo">
      <img :src="require('@/assets/logo.png')">
    </div>
    <van-form class="login-box" @submit="onSubmit">
      <van-field
        v-model="form.email"
        name="邮箱"
        label="邮箱"
        placeholder="请填写邮箱"
        label-width="60px"
        :rules="[{ required: true, message: '请填写邮箱' }]"
      >
        <template #left-icon>
          <span class="iconfont iconshouji" />
        </template>
      </van-field>
      <van-field
        v-model="form.password"
        type="password"
        name="密码"
        label="密码"
        label-width="60px"
        placeholder="请填写密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      >
        <template #left-icon>
          <span class="iconfont iconyanzhengma" />
        </template>
      </van-field>
      <div style="margin: 35px 16px 0;">
        <van-button block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
// import { param2Obj } from '@/utils'
import { Form } from 'vant'
import { getCode, inDingTalk } from '@/utils/dd'
export default {
  name: 'Login',
  components: {
    [Form.name]: Form
  },
  data() {
    return {
      form: { // 登录字段
        email: '',
        password: ''
      },
      redirect: undefined // 重定向路径
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  mounted() {
    if (inDingTalk()) { // 钉钉
      getCode((code) => {
        this.handleDingDingLogin(code, '')
      })
      // 需要获取钉钉用户权限（目前停用）
      // const arr = (window.location.href).split('&')
      // let authCode = ''
      // let stateUrl = ''
      // arr.forEach(item => {
      //   if (item.indexOf('authCode') > -1) authCode = item.substring(9, item.length)
      //   if (item.indexOf('state') > -1) stateUrl = decodeURIComponent(item.substring(6, item.indexOf('#')))
      // })
      // console.log(authCode, stateUrl)
      // // 获取用户权限返回
      // if (stateUrl) {
      //   // 因为返回路径格式的错误，自行重定向跳转
      //   stateUrl = 'https://smartcampus.minthgroup.com/staffcare/test/app/#/login?redirect=' + stateUrl + `&authCode=${authCode}`
      //   return window.location.replace(stateUrl)
      // } else {
      //   const obj = param2Obj(window.location.href)
      //   authCode = obj.authCode
      // }
      // // 钉钉用户权限
      // if (authCode) { // 有
      //   // 钉钉登录
      //   getCode((code) => {
      //     this.handleDingDingLogin(authCode, code)
      //   })
      // } else { // 没有
      //   // 获取钉钉用户权限
      //   /**
      //    * redirect_uri返回不支持哈希模式
      //    * 期望格式:
      //    * https://smartcampus.minthgroup.com/staffcare/test/app/#/login?authCode=111&state=State
      //    * 实际格式：
      //    * https://smartcampus.minthgroup.com/staffcare/test/app/?authCode=111&state=State#/login?id=222
      //    * 只能获取成长跳转之后，自行JS跳转
      //    *  */
      //   const url = encodeURIComponent(`https://smartcampus.minthgroup.com/staffcare/test/app/#/login`)
      //   const state = encodeURIComponent(this.redirect)
      //   const clientId = 'dingkqrjamltn2l3lzzi'
      //   const goto = `https://login.dingtalk.com/oauth2/auth?client_id=${clientId}&response_type=code&scope=snsapi_login&state=${state}&prompt=consent&redirect_uri=${url}`
      //   window.location.replace(goto)
      // }
    }
  },
  methods: {
    onSubmit() {
      // 正常登录方式
      // this.$store.dispatch('user/Login', this.form).then(() => {
      //   this.$router.push({ path: this.redirect || '/' })
      // })
      // 临时登录
      const params = {
        userCode: this.form.email,
        companyCode: ''
      }
      this.$store.dispatch('user/ddLogin', params).then(() => {
        this.$router.push({ path: this.redirect || '/' })
      })
    },
    // 钉钉免登
    handleDingDingLogin(userCode, companyCode) {
      this.$store.dispatch('user/ddLogin', { userCode, companyCode }).then(() => {
        this.$router.push({ path: this.redirect || '/' })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  position: relative;
  background-size: 100%;
  background: #f8f8f8;
  height: 100%;
  overflow: hidden;
  .logo {
    width: 400px;
    margin: 200px auto 0;
    justify-content: center;
    img {
      width: 100%;
    }
  }
  .login-box {
    width: 690px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -25%);
    background: #fff;
    border-radius: @border-radius-lg*2;
    padding: 35px 0;
  }
}
.code-box {
  display: flex;
  justify-content: center;
  padding: 0 100px;
}
.code-img {
  width: 50%;
}

</style>
